<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>   -->

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .grid {
        display: grid;

        /* grid-template-columns: repeat(2,100px);
  grid-template-rows: repeat(auto-fill,200px); */
        /* grid-template: repeat(3, 1fr) / repeat(3, 1fr); */
        grid: repeat(3, 1fr) / repeat(3, 1fr);
        grid-gap: 10px 10px;
        /* grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
  min-height: 60rem; */
        overflow: hidden;

        justify-content: center;
        align-content: center;

        /* 窗口高度 */
        height: 100vh;
      }
      .grid > div {
        background-color: tomato;

      }

    </style>
    <div>全屏9宫格</div>
    <div class="grid">
      <div class="item-1">1</div>
      <div class="item-2">2</div>
      <div class="item-3">3</div>
      <div class="item-4">4</div>
      <div class="item-5">5</div>
      <div class="item-6">6</div>
      <div class="item-7">7</div>
      <div class="item-8">8</div>
      <div class="item-9">9</div>
    </div>
  </body>
</html>
